<template>
  <FormItem
    v-if="propName && formItemFlag"
    :label="t(`${labelKey}`)"
    :colon="false"
    :label-col="{ style: { width: labelWidth } }"
    :labelAlign="labelAlign"
    v-bind="editorProps"
    :name="[propName, ...name]"
  >
    <slot></slot>
  </FormItem>
  <div v-else>
    <slot></slot>
  </div>
</template>
<script lang="ts" name="form-item-wrapper" setup>
  import { ref, computed, onMounted } from "vue"
  import type { PropType } from "vue"

  import { useRuleFormItem } from "/@/hooks/component/useFormItem"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { FormItem } from "ant-design-vue"
  import type { Designer } from "../../type"
  const { t } = useI18n("diyForm")

  const props = defineProps({
    value: { type: Boolean },
    propName: { type: String, default: null },
    // 兼容属性编辑器嵌套另一个属性编辑器, 倒是右侧设置面板的表单标签展示问题
    formItemFlag: { type: Boolean, default: true },
    optionModel: { type: Object, default: () => {} },
    editorProps: { type: Object, default: () => {} },
    selectedWidget: Object,
    designer: { type: Object as () => Designer },
    // 表单字段名称
    name: {
      type: Array as PropType<string[] | number[]>,
      default: () => [],
    },
  })
  const labelKey = computed(() => {
    const name = props.name
    const key = `settings.label.${props.propName}`
    return key + (name && name.length > 0 ? "." + name.join(".") : "")
  })
  const labelWidth = ref(props.selectedWidget?.settingForm?.labelWidth || "95px")
  const labelAlign = ref(props.selectedWidget?.settingForm?.labelAlign || "right")
  onMounted(() => {})
</script>

<style lang="less"></style>
